<div class="app-grid-header">
  <h2 class="app-grid-h2">{{ 'APP.LIST' | translate }}</h2>
  <span class="fill-space"></span>
  <button mat-icon-button (click)="closeView()">
    <i class="show list view las la-th-list"></i>
  </button>
</div>
<div class="app-container">
  <div class="sp-container" *ngIf="loading$ | async">
    <mat-spinner color="primary" diameter="50"></mat-spinner>
  </div>

  <div
    [routerLink]="['/projects', projectId, 'apps', app.id]"
    data-e2e="app-card"
    class="app-wrap"
    *ngFor="let app of appsSubject | async"
    matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
  >
    <cnsl-app-card
      class="grid-card"
      matRipple
      [type]="app.samlConfig ? 'SAML' : app.oidcConfig?.appType"
      [isApiApp]="app.apiConfig !== undefined"
    >
      {{ app.name.charAt(0) }}
      <ng-container *ngIf="app.oidcConfig?.appType !== undefined">
        <i *ngIf="app.oidcConfig?.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE" class="lab la-openid"></i>
        <i *ngIf="app.oidcConfig?.appType === OIDCAppType.OIDC_APP_TYPE_WEB" class="lab la-openid"></i>
        <i *ngIf="app.oidcConfig?.appType === OIDCAppType.OIDC_APP_TYPE_USER_AGENT" class="lab la-openid"></i>
        <i *ngIf="app.apiConfig" class="las la-robot"></i>
      </ng-container>
      <span *ngIf="app.samlConfig" class="samlspan">SAML</span>
    </cnsl-app-card>
    <span class="name">{{ app.name }}</span>
    <span *ngIf="app.oidcConfig?.appType !== undefined && app.oidcConfig?.appType !== null" class="type">
      {{ 'APP.OIDC.APPTYPE.' + app.oidcConfig?.appType | translate }}</span
    >
    <span *ngIf="app.apiConfig !== undefined" class="type"> API</span>
    <span *ngIf="app.samlConfig !== undefined" class="type"> SAML</span>
  </div>

  <ng-template cnslHasRole [hasRole]="['project.app.write']">
    <div
      class="app-wrap"
      *ngIf="!disabled"
      data-e2e="app-card-add"
      [routerLink]="['/projects', projectId, 'apps', 'create']"
    >
      <cnsl-app-card class="grid-card" matRipple [type]="OIDCAppType.ADD">
        <mat-icon>add</mat-icon>
      </cnsl-app-card>
      <span class="name">{{ 'ACTIONS.NEW' | translate }}</span>
    </div>
  </ng-template>
</div>
